<template>
	<el-container style="height:100%;max-height: 100%;">
		<el-header>
			<el-row>
				<el-col :span="4" style="width: 180px; text-align: left;">
					<a href="/tools/index">
						<img src="../assets/logo.png" class="logo-img" alt="LOGO">
					</a>
				</el-col>
				<el-col :span="16" style="width: calc(100% - 320px) !important;" class="menu_main">
					<el-menu
					:default-active="topMenuActive"
					class="el-menu-demo"
					mode="horizontal"
					background-color="#0c1014"
					text-color="#fff"
					active-text-color="#409EFF">
						<el-submenu style="float:right;" index="more_module" v-if="menuLists.moreMenu.length>0"></div>>
							<template slot="title">更多模块</template>
							<el-menu-item v-for="(item,index) in menuLists.moreMenu"  @click="showLeftMenu(item)" :index="item.id+'_top'" :key="item.id+'_top'">{{item.menu_name}}
							</el-menu-item>
						</el-submenu>

						<el-menu-item style="float:right;" v-for="(item,index) in menuLists.topMenu"  @click="showLeftMenu(item)" :index="item.id+'_top'" :key="item.id+'_top'">{{item.menu_name}}
						</el-menu-item>

					</el-menu>
				</el-col>
				<el-col :span="4" style="text-align: right;width: 140px;">
					<div style="float: left;width: 85px;margin-right:5px;">
						<span class="el-dropdown-link">
							{{userInfo.user_name}}
						</span>
					</div>
					<div style="float:left;width:50px;">
						<el-dropdown>
							<el-avatar :size="50" :src="userInfo.head_img" class="head_img"></el-avatar>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="users">用户信息</el-dropdown-item>
								<el-dropdown-item @click.native="clearnCache">清空缓存</el-dropdown-item>
								<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</el-col>
			</el-row>
		</el-header>
		<el-container>
			<el-aside width="200px" style="overflow: hidden;">
				<el-menu default-active="1-4-1" class="el-menu-vertical-demo" 
				mode="vertical"
				:default-active="leftMenuActive"
				:collapse="isCollapse"
				background-color="#102540"
				text-color="#fff"
				active-text-color="#409EFF"
				:unique-opened="uniqueOpened">

					<template v-for="(item,index) in leftMenu" v-if="item.is_show == 1">
						<el-submenu :index="item.id+'_left'" v-if="item.child" :key="item.id+'_left'">
							<template slot="title">
								<i :class="item.icon"></i>
								<span class="item-name">{{item.menu_name}}</span>
							</template>
							<el-menu-item v-for="(child,cindex) in item.child" :index="child.id+'_left'" :key="child.id+'_left'" @click="sysLeftJump(child)">
								{{child.menu_name}}
							</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="!item.child" :index="item.id+'_left'" @click="sysLeftJump(item)">
							<i :class="item.icon"></i>
							<span class="item-name" slot="title">{{item.menu_name}}</span>
						</el-menu-item>
					</template>

				</el-menu>
			</el-aside>
			<el-container>
				<el-main>
					<div v-if="pagebreadcrumb!=''">
						<el-breadcrumb separator="/">
						  	<el-breadcrumb-item>{{pagebreadcrumb}}</el-breadcrumb-item>
						</el-breadcrumb>
						<el-divider></el-divider>
					</div>
					<transition name="fade" mode="out-in">
						<router-view />
					</transition>
				</el-main>
			</el-container>
		</el-container>
		<el-dialog :title="formDialogTitle" :visible.sync="isFormDialog" width="800px">
			<!-- v-if主要是为了防止第一次加载之后不再重新加载，这边判断显示后直接重新载入 -->
	        <components is="currentForm" v-if="isFormDialog" :user_id="userInfo.id"  @closeDialog="closeDialog"></components>
	    </el-dialog>
	</el-container>
</template>
<script>
import Index from './Index.vue'
import currentForm from './user/currentForm.vue';
export default {
	data () {
		return {
			topMenuActive:'',
			leftMenuActive:'',
			pagebreadcrumb:'',
			uniqueOpened:true,
			isCollapse: false,
			userInfo:{},
			menuLists:[],
			leftMenu:[],
			menuRouter:{
                path: '/tools',
                component: resolve => require(['./Index.vue'], resolve),
                name : '首页',
                title: '首页',
                props:{"id":0},
                children:[]
            },
            isFormDialog:false,
            formDialogTitle:'用户信息'
		}
	},components:{
        currentForm
    },methods: {
    	closeDialog(data){
    		this.isFormDialog = false;
    		this.userInfo = data;
    		// console.log(data);
    		// this.getUserInfo();
    	},showLeftMenu(item){
			for(var i in this.menuLists.leftMenu){
				var tmp = this.menuLists.leftMenu[i];
				if(tmp.id==item.id){
					this.leftMenu = tmp.child;
					// console.log(this.leftMenu);
				}
			}
		},sysLeftJump(item){
			this.pagebreadcrumb = item.menu_name;
			this.Common.jump(this,item.url,0);
		},getUserInfo(){
			var url = '/admin/user/getInfo';
            var token = this.Common.cookie('token');
            var data = {'token':token};
            var tar = this;
			tar.Common.request(url, data, function(data){
	        	tar.loginLogining = false;
	        	if(data.success_code==0){
	        		tar.$message({
						title: '警告',
						message: data.message,
						type: 'error'
					});
					//登录验证都失败了，退出登录
					tar.Common.removeCookie('token');
					tar.Common.jump(tar,'/tools/login',1000);
	        	}else{
	    			tar.userInfo = data.result;
	    			//获取菜单
					tar.getMenuList();
	        	}
	        },function(data){
	        	var message = '接口请求失败';
	        	if(data.message){
	        		message = data.message;
	        	}
	        	tar.loginLogining = false;
				tar.$message({
					title: '警告',
					message: message,
					type: 'error'
				});
				tar.Common.jump(tar,'/tools/login',1000);
	        },this);
		},getMenuList(){
			var url = '/admin/menu/getLists';
            var token = this.Common.cookie('token');
            var data = {'token':token};
            var tar = this;
			tar.Common.request(url, data, function(data){
	        	tar.loginLogining = false;
	        	if(data.success_code==0){
	        		tar.$message({
						title: '警告',
						message: data.message,
						type: 'error'
					});
	        	}else{
	        		tar.menuLists = data.result;
	        		tar.menuLists.topMenu.sort(tar.compare('sort'))
	        		tar.setRouter();	//设置路由
	        		var curMenu = tar.checkCurrentMenu(tar.menuLists.leftMenu,1); //当前路径
	        		if(curMenu!=undefined){
	        			tar.leftMenu = curMenu.child;
	        			tar.topMenuActive = curMenu.id+'_top';
	        			// console.log(tar.topMenuActive);
	        		}
	        		
	        	}
	        },function(data){
	        	var message = '接口请求失败';
	        	if(data.message){
	        		message = data.message;
	        	}
	        	tar.loginLogining = false;
				tar.$message({
					title: '警告',
					message: message,
					type: 'error'
				});
	        },this);
		},setRouter(){
			this.checkRouter(this.menuLists.leftMenu);
            var r = [this.menuRouter];
            this.$router.addRoutes( r );
        },checkRouter(router){
        	var menuLists = router;
            for(var k in menuLists){
                var item = menuLists[k];
                var itemModulePath = (item.url).replace("/tools",".");
	            // console.log(itemModulePath);
                if(item.url && item.url!='#' && item.url!=null){
                	this.menuRouter['children'].push({
	                    path : item.url,
	                    title: item.menu_name,
	                    props:{"id":item.id},
	                    meta:{
	                        name:item.menu_name
	                    },
	                    component:resolve => {
	                        require.ensure([], (require) => {
	                            resolve(require(itemModulePath+'.vue'))
	                        })
	                    },
	                    name:item.menu_name,
	                });
                }
                if(item.child_count!=undefined){
                	this.checkRouter(item.child);
                }
            }
        },checkCurrentMenu(menus,level){
			//使用当前模块，显示左侧边栏，并打开对应的菜单
			for(var i in menus){
				var curTmpMenu = menus[i];

				if(curTmpMenu.url == this.$route.path){
					this.leftMenuActive = curTmpMenu.id+'_left';
					this.pagebreadcrumb = curTmpMenu.menu_name;
					return 1;
				}

				if(curTmpMenu.child_count!=undefined){
					var rs = this.checkCurrentMenu(curTmpMenu.child,level+1);
					if(rs==1){
						if(level==1){
							return curTmpMenu;
						}else{
							return 1;
						}
					}
				}
			}
		},logout(){
			var tar = this;
            this.$confirm('确认退出吗?', '退出登录', {
                //type: 'warning'
            }).then(()=>{
                tar.Common.removeCookie('token');
                tar.$router.push('/tools/login');
            }).catch(()=>{

            });
		},compare(property){
            return function(a,b){
                let value1 = parseInt(a[property]);
                let value2 = parseInt(b[property]);
                return value2-value1;
            }
        },clearnCache(){
        	var tar = this;
            this.$confirm('确认清空缓存吗?', '清空缓存', {
                //type: 'warning'
            }).then(()=>{
                var url = '/admin/sys/clearncache';
	            var token = this.Common.cookie('token');
	            var data = {'token':token};
	            var tar = this;
				tar.Common.request(url, data, function(data){
		        	tar.loginLogining = false;
		        	if(data.success_code==0){
		        		tar.$message({
							title: '警告',
							message: data.message,
							type: 'error'
						});
		        	}else{
		        		tar.$message({
							title: '成功',
							message: '缓存清除成功',
							type: 'success'
						});
		        		//刷新本页面
						window.location.reload();
		        	}
		        },function(data){
		        	var message = '接口请求失败';
		        	if(data.message){
		        		message = data.message;
		        	}
		        	tar.loginLogining = false;
					tar.$message({
						title: '警告',
						message: message,
						type: 'error'
					});
		        },this);
            }).catch(()=>{

            });
        },users(){
        	this.isFormDialog = true;
        }
	},mounted(){
		var token = this.Common.cookie('token');
		if(token==null){
			this.Common.jump(this,this.Common.url.LOGIN,1000);
		}else{
			//获取用户信息
			this.getUserInfo();
		}
		
	}
};
</script>
<style>
.el-header{
	background-color: #0c1014;
	color: #FFF;
	text-align: center;
	line-height: 60px;
}
.el-header .logo-img{
	height: 34px;
    vertical-align: middle;
    cursor: pointer;
}
.el-header .head_img{
	height: 34px;
    width: 34px;
    line-height: 34px;
    vertical-align: middle;
}
.el-dropdown-link {
	cursor: pointer;
	color: #FFF;
}
.el-icon-arrow-down {
	font-size: 12px;
}

.el-aside {
	background-color: #102540;
	color: #FFF;
	text-align: center;
	line-height: 200px;
}
.el-aside .el-menu{
	text-align: left;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-main {
	background-color: none;
	color: #333;
}
.el-divider--horizontal{
	margin:20px 0 !important;
}
body > .el-container {
	margin-bottom: 40px;
	}
	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
	line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}
.el-menu.el-menu--horizontal{
	border-bottom: none;
}
</style>